<template>
  <div class="containerA">
    <h1>修改密码</h1>
    <form @submit.prevent="changePassword">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" v-model="username" disabled class="rounded-input" />
      </div>
      <div class="form-group">
        <label for="oldPassword">原密码:</label>
        <input type="password" v-model="oldPassword" required class="rounded-input" />
      </div>
      <div class="form-group">
        <label for="newPassword">新密码:</label>
        <input type="password" v-model="newPassword" required class="rounded-input" />
      </div>
      <div class="form-group">
        <label for="confirmPassword">确认新密码:</label>
        <input type="password" v-model="confirmPassword" required class="rounded-input2" />
      </div>
      <button type="submit" class="save-button">确认修改</button>
    </form>
    <p v-if="message">{{ message }}</p>
  </div>
</template>
  
  <script>
  export default {
    name: 'PasswordChange',
    data() {
      return {
        username: '', // 当前登录用户的用户名
        oldPassword: '', // 原密码
        newPassword: '', // 新密码
        confirmPassword: '', // 确认新密码
        message: '', // 提示信息
        userRole: '', // 用户角色
      };
    },
    created() {
      // 通过 props 或其他方式获取当前用户信息
      this.username = localStorage.getItem('username'); // 从 localStorage 获取用户名
      this.userRole = localStorage.getItem('userRole'); // 从 localStorage 获取用户角色
    },
    methods: {
      async changePassword() {
        // 验证新密码和确认密码是否一致
        if (this.newPassword !== this.confirmPassword) {
          this.message = '新密码和确认密码不一致';
          return;
        }
  
        // 发送请求到后端
        const endpoint = this.userRole === 'admin' ? 'http://localhost:3000/api/admins/change-password' : 'http://localhost:3000/api/users/change-password';
        const payload = {
          username: this.username,
          oldPassword: this.oldPassword,
          newPassword: this.newPassword,
        };
  
        try {
          const response = await fetch(endpoint, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload),
          });
  
          if (!response.ok) {
            throw new Error('密码修改失败');
          }
  
          const result = await response.json();
          this.message = result.message; // 显示成功或失败消息
        } catch (error) {
          this.message = error.message; // 显示错误消息
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .containerA {
      background-color: white; /* 白色背景 */
      border-radius: 10px; /* 圆角 */
      padding: 20px; /* 内边距 */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 350px; 
      width: 300px;
      
  }
  
  h1 {
      color: #333;
  }
  
  form {
      display: flex;
      flex-direction: column;
      width: 100%; /* 确保表单宽度适应容器 */
      max-width: 400px; /* 最大宽度限制 */
  }
  
  .form-group {
      display: flex;
      align-items: center; /* 垂直居中对齐 */
      justify-content: flex-start; /* 水平起始对齐 */
      gap: 10px; /* 标签和输入框之间的间隔 */
      margin-bottom: 15px; /* 每个表单组之间的间距 */
  }
  
  label {
      white-space: nowrap; /* 防止标签换行 */
      margin-right: 10px; /* 标签和输入框之间的间隔 */
  }
  
  /* 输入框样式 */
  .rounded-input {
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px; /* 添加圆角 */
      margin-left: 30px;
      width: 150px; 
      transition: border-color 0.3s; /* 添加悬停效果 */
  }

  .rounded-input2 {
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px; /* 添加圆角 */
      margin-left: 0px;
      width: 150px; 
      transition: border-color 0.3s; /* 添加悬停效果 */
  }


  
  .rounded-input:hover {
      border-color: #007bff; /* 悬停时边框颜色 */
  }
  
  /* 保存按钮样式 */
  .save-button {
      align-self: center; /* 居中对齐按钮 */
      margin-top: 20px; /* 按钮与表单之间的间距 */
      padding: 10px 20px; /* 内边距 */
      background-color: #007bff; /* 蓝色背景 */
      color: white; /* 白色文字 */
      border: none;
      border-radius: 4px; /* 添加圆角 */
      cursor: pointer;
      width: 200px; /* 按钮宽度 */
      display: block; /* 确保按钮占满整个容器 */
  }
  
  .save-button:hover {
      background-color: #0056b3; /* 悬停时深蓝色背景 */
  }
  
  p {
      margin-top: 20px;
      color: red; /* 错误信息为红色 */
  }
  </style>